<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            list-style: none;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            text-align: center;
            width: 100px;
            cursor: pointer;
        }
        p{
            width: 120px;
            height: 35px;
            line-height: 50px;
            display: none;
            text-align: center;
            color:blue;
            
        }
        li.dne{
            color:greenyellow;
        }
        p.Top{
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li class="Top">ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
        <li>SIX</li>
        <li>SEVEN</li>
        <li>EIGHT</li>
    </ul>
    <div>
        <p class="dne">1.嘉扬</p>
        <p>2.啊杨</p>
        <p>3.阿羊</p>
        <p>4.啊扬</p>
        <p>5.洋洋</p>
        <p>6.羊羊羊</p>
        <p>7.咩</p>
        <p>8.咩＋咩</p>
    </div>
    <script>
        var indexs=document.getElementsByTagName('li');
        var undexs=document.getElementsByTagName('p');
        for(i=0;i<indexs.length;i++)
        {
            indexs[i].wish=i;
            indexs[i].onclick=function(){
                for(v=0;v<indexs.length;v++){
                    indexs[v].className='';
                    undexs[v].className='';
                }
                this.className="Top";
                var a=this.wish;
                undexs[a].className="Top";
            }
        }
    </script>
</body>
</html>